<div class="content-section introduction">
    <div>
        <span class="feature-title">Messages</span>
        <span>Messages is used to display messages inline.</span>
    </div>
</div>

<div class="content-section implementation">
    <p-messages [(value)]="msgs"></p-messages>

    <div>
        <button type="button" pButton (click)="showSuccess()" label="Success" class="ui-button-success"></button>
        <button type="button" pButton (click)="showInfo()" label="Info" class="ui-button-info"></button>
        <button type="button" pButton (click)="showWarn()" label="Warn" class="ui-button-warning"></button>
        <button type="button" pButton (click)="showError()" label="Error" class="ui-button-danger"></button>
        <button type="button" pButton (click)="showMultiple()" label="Multiple"></button>
        <button type="button" pButton (click)="clear()" icon="fa-close" style="float:right" label="Clear"></button>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="Documentation">
            <h3>Import</h3>
<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;MessagesModule&#125; from 'primeng/primeng';
</code>
</pre>

            <h3>Getting Started</h3>
            <p>A single message is specified by Message interface in PrimeNG that defines the id, severity, summary and detail as the properties.
                Messages to display are defined using the value property which should an array of Message instances.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-messages [(value)]="msgs"&gt;&lt;/p-messages&gt;
</code>
</pre>
            
            <h3>Severities</h3>
            <p>Here are the possible values for the severity of a message.</p>
            <ul>
                <li>success</li>
                <li>info</li>
                <li>warn</li>
                <li>error</li>
            </ul>

            <h3>Showing Messages</h3>
            <p>Adding messages to the array is enough to display them. Similarly removing a message from the array is also removed from the UI.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-messages [(value)]="msgs"&gt;&lt;/p-messages&gt;

&lt;button type="button" (click)="show()"&gt;Show&lt;/button&gt;
&lt;button type="button" (click)="clear()"&gt;Hide&lt;/button&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
show() &#123;
    this.msgs.push(&#123;severity:'info', summary:'Info Message', detail:'PrimeNG rocks'&#125;);
&#125;

hide() &#123;
    this.msgs = [];
&#125;
</code>
</pre>

            <h3>Closable</h3>
            <p>Messages are closable by default resulting in a close icon being displayed on top right corner.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-messages [(value)]="msgs"&gt;&lt;/p-messages&gt;
</code>
</pre>

            <p>In order to disable closable messages, set closable to false. Note that in this case two-way binding is not necessary as the component
            does not need to update its value.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-messages [value]="msgs" [closable]="false"&gt;&lt;/p-messages&gt;
</code>
</pre>

            <h3>Properties</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Type</th>
                        <th>Default</th>
                        <th>Description</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>value</td>
                            <td>array</td>
                            <td>null</td>
                            <td>An array of messages to display.</td>
                        </tr>
                        <tr>
                            <td>closable</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>Defines if message box can be closed by the click icon.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Styling</h3>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>ui-messages</td>
                            <td>Container element.</td>
                        </tr>
                        <tr>
                            <td>ui-messages-info</td>
                            <td>Container element when displaying info messages.</td>
                        </tr>
                        <tr>
                            <td>ui-messages-warn</td>
                            <td>Container element when displaying warning messages.</td>
                        </tr>
                        <tr>
                            <td>ui-messages-error</td>
                            <td>Container element when displaying error messages.</td>
                        </tr>
                        <tr>
                            <td>ui-messages-success</td>
                            <td>Container element when displaying success messages.</td>
                        </tr>
                        <tr>
                            <td>ui-messages-close</td>
                            <td>Close icon.</td>
                        </tr>
                        <tr>
                            <td>ui-messages-icon</td>
                            <td>Severity icon.</td>
                        </tr>
                        <tr>
                            <td>ui-messages-summary</td>
                            <td>Summary of a message.</td>
                        </tr>
                        <tr>
                            <td>ui-messages-detail</td>
                            <td>Detail of a message.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Dependencies</h3>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/messages" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-messages [(value)]="msgs"&gt;&lt;/p-messages&gt;

&lt;div&gt;
    &lt;button type="button" pButton (click)="showSuccess()" label="Success" class="ui-button-success"&gt;&lt;/button&gt;
    &lt;button type="button" pButton (click)="showInfo()" label="Info" class="ui-button-info"&gt;&lt;/button&gt;
    &lt;button type="button" pButton (click)="showWarn()" label="Warn" class="ui-button-warning"&gt;&lt;/button&gt;
    &lt;button type="button" pButton (click)="showError()" label="Error" class="ui-button-danger"&gt;&lt;/button&gt;
    &lt;button type="button" pButton (click)="showMultiple()" label="Multiple"&gt;&lt;/button&gt;
    &lt;button type="button" pButton (click)="clear()" icon="fa-close" style="float:right" label="Clear"&gt;&lt;/button&gt;
&lt;/div&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class MessagesDemo &#123;

    msgs: Message[] = [];

    showInfo() &#123;
        this.msgs = [];
        this.msgs.push(&#123;severity:'info', summary:'Info Message', detail:'PrimeNG rocks'&#125;);
    &#125;

    showWarn() &#123;
        this.msgs = [];
        this.msgs.push(&#123;severity:'warn', summary:'Warn Message', detail:'There are unsaved changes'&#125;);
    &#125;

    showError() &#123;
        this.msgs = [];
        this.msgs.push(&#123;severity:'error', summary:'Error Message', detail:'Validation failed'&#125;);
    &#125;

    showMultiple() &#123;
        this.msgs = [];
        this.msgs.push(&#123;severity:'info', summary:'Message 1', detail:'PrimeNG rocks'&#125;);
        this.msgs.push(&#123;severity:'info', summary:'Message 2', detail:'PrimeUI rocks'&#125;);
        this.msgs.push(&#123;severity:'info', summary:'Message 3', detail:'PrimeFaces rocks'&#125;);
    &#125;

    clear() &#123;
        this.msgs = [];
    &#125;
&#125;
</code>
</pre>
        </p-tabPanel>
    </p-tabView>
</div>